<template>
  <div id="top-wrapper">
    <div class="left-nav">
      <div>
        <span>AI Force</span>
      </div>
      <div class="nav-wrapper">
        <div class="nav-item" active-class="active">
          <router-link :to="{name:'homepage',params:{userData:this.$route.params.userData}}">首页</router-link>
        </div>
        <div class="nav-item" active-class="active">
          <router-link :to="{name:'algorithm',params:{userData:this.$route.params.userData}}" >算法广场</router-link>
        </div>
        <div class="nav-item" active-class="active">
          <router-link :to="{name:'demand',params:{userData:this.$route.params.userData}}">需求广场</router-link>
        </div>
      </div>
    </div>
    <div class="right-nav">
      <div class="btn-wrapper" v-if="!this.isLogin">
        <button class="user-btn user-login-btn" id="login" @click="goLogin()">登录</button>
      </div>
      <div class="user-nav-wrapper" v-else>
        <div class="user-photo-wrapper">
          <input type="file" id="changeImg" @change="changeImg()" ref="file"/>
          <label for="changeImg" class="user-img-wrapper">
            <img :src="imgUrl()" alt="头像" />
          </label>
        </div>
        <div class="btn-wrapper">
          <button class="user-btn user-demand-btn" @click="goPublish()">发布需求</button>
        </div>
        <div class="btn-wrapper">
          <button class="user-btn user-info-btn" @click="goMsg()">信息</button>
        </div>
        <div class="btn-wrapper">
          <button class="user-btn user-exit-btn" @click="exitLogin()">退出登录</button>
        </div>
      </div>
    </div>
    <publish @send="get"></publish>
    <div class="warn-wrapper">
      <div class="little-point"></div>
      <span class="warn-info">{{ this.warning }}</span>
    </div>
  </div>
</template>

<script>

import publish from './publish.vue'
import axios from 'axios';
export default {
  name: "top",
  components:{
    publish
  },
  data() {
    return {
      isLogin: false,
      userImg:"",
      warning:""
    };
  },
  mounted() {
    // 通过登录时传递的isLogin判断是否为登录状态
    if (this.$route.params.isLogin) {
      this.isLogin = true;
      this.userImg="http://120.77.241.190:9999/"+this.$route.params.userData.portrait
      this.warning="登陆成功"
      document.getElementsByClassName("little-point")[0].style.backgroundColor="green"
      this.warn()
    }
  },
  methods: {
    // 用户头像
    imgUrl(){ 
      if(this.userImg=="http://120.77.241.190:9999/0"){
        return require("../assets/images/user.png")
      }else{
        return this.userImg
      }
    },
    // 跳转至登录页面
    goLogin() {
      this.$router.push({
        name: "login",
        params:{
          userData:this.$route.params.userData
        }
      });
    },
    // 退出登录,将路由器中的userData清除
    exitLogin(){
      this.isLogin=false;
      this.$route.params.userData="";
    },
    // 跳转至信息页面
    goMsg(){
      this.$router.push({
        name: "message",
        params:{
          userData:this.$route.params.userData
        }
      });
    },
    // 弹出发布需求的信息框
    goPublish(){
      document.getElementsByClassName("publish-wrapper")[0].style.display="block"
    },
    // 改变用户头像
    changeImg(){
      let file=this.$refs.file.files[0];
      // 当用户取消改变时
      if(!file){
        return 
      }
      else{
        axios({
          method:'POST',
          url:"/api/user/changePortrait",
          data:{
            file,
            userId:this.$route.params.userData.id
          },
          transformRequest:[
            function(data){
              let fd=new FormData();
              fd.append("file",data.file)
              fd.append("userId",data.userId)
              return fd
            }
          ]
        }).then((response)=>{
          this.userImg="http://120.77.241.190:9999/"+response.data.data
        })
      }
    },
    // 获取子组件publish传递过来的数据
    get(value,color){
      this.warning=value;
      if(color=="yellow"){
        document.getElementsByClassName("little-point")[0].style.backgroundColor="yellow";
      }else{
        document.getElementsByClassName("little-point")[0].style.backgroundColor="green"
      }
      this.warn();
    },
    warn() {
      let warnInfo = document.getElementsByClassName("warn-wrapper")[0];
      warnInfo.style.right = 220 + "px";
      let t = setTimeout(function () {
        warnInfo.style.right = -250 + "px";
        clearTimeout(t);
      }, 5000);
    },
  },
};
</script>

<style>
#top-wrapper {
  display: flex;
  height: 60px;
  background-color: #000;
  justify-content: space-between;
  color: white;
  font-size: 14px;
  position: relative;
}
.left-nav {
  width: 20%;
  margin-left: 16%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 65%;
  cursor: pointer;
}
.nav-wrapper div {
  padding-bottom: 2px;
  border-bottom: 2px solid black;
}
.nav-wrapper div:hover,
.nav-wrapper .router-link-active {
  border-bottom: 2px solid rgb(140, 48, 245);
}
.nav-item a {
  text-decoration: none;
  color: white;
  font-size: 14px;
}
.right-nav {
  margin-right: 16%;
  text-align: center;
  display: flex;
  align-items: center;
}
.btn-wrapper {
  margin-right: 15px;
}
.user-btn {
  width: 75px;
  height: 30px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
.user-login-btn {
  background-color: #fff;
  color: #8c30f5;
}
#changeImg {
  display: none;
}
.user-nav-wrapper {
  display: flex;
  align-items: center;
}
.user-photo-wrapper {
  display: inline-block;
  margin-right: 30px;
}
.user-photo-wrapper img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.user-demand-btn {
  color: #fff;
  background-color: #8c30f5;
}
.user-info-btn {
  color: #fff;
  background-color: #000;
}
.user-exit-btn {
  background: #ee1212;
  width: 75px;
  height: 30px;
  border-radius: 5px;
}
</style>